<template>
  <div class="batch-vcore" ref="vcore"></div>
</template>
<script>
import dayjs from 'dayjs'
export default {
  name: "batchVcore",
  components: {},
  props: {
    endTime: {
      default: ""
    },
    startTime: {
      default: ""
    },
    type: {
      default: ""
    }
  },
  data() {
    return {
      myChart: null,
      xData: [],
      cpuData:[],

    };
  },
  computed: {},
  methods: {
    drawLine() {
      this.myChart = this.$echarts.init(this.$refs.vcore);
      var option = {
        title: {
          text: "Yarn 资源使用量"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          bottom: "2%"
        },
        toolbox: {
          feature: {
            saveAsImage: {
              show: true,
              title: "下载"
            }
          }
        },
        grid: {
          left: "6%",
          right: "8%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.xData,
            // axisLabel :{
            //     interval:0
            // },
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "CPU",
            type: "line",
            stack: "cpu",
            areaStyle: {},
            emphasis: {
              focus: "series"
            },
            data:this.cpuData
          },
          {
            name: "内存",
            type: "line",
            stack: "me",
            areaStyle: {},
            emphasis: {
              focus: "series"
            },
            data:this.meData
          },
        ]
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
    initData() {
      this.$http.batch
        .getMetrics({
          start_time: this.startTime,
          end_time: this.endTime,
          type: this.type,
          project_id: this.$route.query.project_id
        })
        .then((res) => {
         
          var data=res
          this.xData = data.map((item) => {
            return dayjs(item.date).format("YYYY-MM-DD HH:mm:ss");
          });
          this.cpuData = data.map((item) => {
            return item.cpu;
          });
          this.meData = data.map((item) => {
            return item.memory;
          });
          console.log(this.xData);
          this.drawLine();
        });
    }
  },
  mounted() {
    this.initData();
    
  }
};
</script>
<style lang="scss" scoped>
.batch-vcore {
  width: 100%;
  height: 100%;
}
</style>
